<template>
    <div class="history-list">
        <div class="group-list" v-for="(groupName, idx) in Object.keys(urlList)" :key="idx">
            <div class="group-list-name">{{ groupName }}</div>
            <div>
                <div
                    v-for="(item, index) in urlList[groupName]"
                    :key="index"
                    :class="[
                        'history-list-item',
                        index % 2 === 0 ? 'url-item-odd' : 'url-item-even',
                        activeUrlId === urlList[groupName][index].id ? 'active-url-class' : ''
                    ]"
                    @click="setActiveUrlIndex(index, groupName)"
                >
                    <span :style="{ backgroundColor: methodBackgroundColor(item.method) }">{{
                        methodDisplay(item.method)
                    }}</span>
                    <p class="">{{ item.url }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Watch } from 'vue-property-decorator';
    import { State, Mutation } from 'vuex-class';
    import { IntrinsicElements } from '@/appTypes';
    @Component({
        components: {}
    })
    export default class Histories extends Vue<IntrinsicElements> {
        name: 'Histories' | undefined;
        activeUrlId = '';
        urlList: any = {};
        crtUrl: any = {};
        @State('isPullHistoryUrlList') isPullHistoryUrlList: any;
        @Watch('isPullHistoryUrlList', { immediate: true, deep: true })
        refreshList() {
            this.getUrlList();
        }
        @Mutation('setCrtUrl') setCrtUrl!: Function;
        public setActiveUrlIndex(index: number, groupName: string) {
            this.$storage.setSession('crtUrl', this.urlList[groupName][index]);
            this.setCrtUrl(this.urlList[groupName][index]);
            this.crtUrl = this.urlList[groupName][index];
            this.activeUrlId = this.crtUrl.id;
        }
        mounted() {
            this.getUrlList();
        }
        public getUrlList() {
            this.$db.onPull('urls').then((res: any) => {
                const obj: any = {};
                if (res.length > 0) {
                    res.map((item: any) => {
                        const key = item.useTime.split(' ')[0];
                        if (obj[key]) {
                            obj[key].push(item);
                        } else {
                            obj[key] = [item];
                        }
                    });
                }
                this.urlList = obj;
                const urlTemp = this.$storage.getSession('crtUrl');
                if (urlTemp) {
                    this.activeUrlId = urlTemp.id || '';
                }
            });
        }
        /**
         * @Description: 计算不同method标签的文本显示
         * @methodsName: methodDisplay
         * @param:  string
         * @return: string
         * @author: Jsir
         */
        public methodDisplay(method: string) {
            let temp: string = method;
            if (method.length > 4) {
                temp = temp.substr(0, 3);
            }
            return temp.toUpperCase();
        }

        /**
         * @Description: 计算不同method标签的背景色
         * @methodsName: methodBackgroundColor
         * @param:  string
         * @return: string
         * @author: Jsir
         */
        public methodBackgroundColor(method: string): string {
            const colorMap: { [key: string]: string } = {
                get: '#45a54a',
                post: '#ca7c3c',
                put: '#2d73b3',
                delete: '#cf2d2d'
            };
            return colorMap[method.toLowerCase()] || '#aaaaaa';
        }
    }
</script>

<style scoped lang="less" src="./histories.less"></style>
